<script lang="ts" setup>
  import { computed, nextTick, onMounted, ref, watch } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { getOrderDetail } from '@/api/order'
  import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'
  import Status from '@/components/pages/order/detail/pages/header/Status.vue'
  import BtnGroup from '@/components/pages/order/detail/pages/header/BtnGroup.vue'
  import UserInfo from '@/components/pages/order/detail/pages/body/user-info/UserInfo.vue'
  import NetworkInfo from '@/components/pages/order/detail/pages/body/network-info/NetworkInfo.vue'
  import OrderInfo from '@/components/pages/order/detail/pages/body/order-info/OrderInfo.vue'
  import Commodity from './components/good-list/Index.vue'
  import ServiceFeeTable from '@/components/pages/order/detail/fee/List.vue'
  import SparePartList from '@/components/pages/order/detail/part/List.vue'
  import TotalFee from '@/components/pages/order/detail/pages/body/total-fee/TotalFee.vue'
  import FinishOrderInfo from '@/components/pages/order/detail/pages/body/finish-order-info/FinishOrderInfo.vue'
  import { HMessage, HMessageBox } from '@/components/common/message'
  import routeComponentName from '@/config/route-component-name'
  import BillInfo from './components/bill-info/Index.vue'
  import { useUserStore } from '@/store/modules/user'
  import { useEngineerTakeMaterialConfirm } from '@/services/pages/order/useOrder'
  import fixedData from '@/config/fixed-data/order/order'
  import EndOrderFormDrawer from './components/end-order-form-drawer.vue'
  import { useGetOrderEndStatus } from '@/services/pages/order/useOrderDetail'
  import {
    useEngineerConfirmAcceptOrder,
    useNetworkConfirmAcceptOrder,
  } from '@/services/module/order/useDetail'
  import Sidebar from './components/sidebar/Index.vue'
  import { useOrderStore } from '@/store/modules/order'

  const { takeMaterialLoading, takeMaterial } = useEngineerTakeMaterialConfirm()
  const {
    status: endStatus,
    getStatusLoading: getOrderEndStatusLoading,
    getStatus: getOrderEndStatus,
  } = useGetOrderEndStatus()
  const { engineerAcceptOrderParam, engineerAcceptOrderLoading, engineerAcceptOrder } =
    useEngineerConfirmAcceptOrder()
  const { networkAcceptOrderParam, networkAcceptOrderLoading, networkAcceptOrder } =
    useNetworkConfirmAcceptOrder()
  const { setCopyInfo } = useOrderStore()

  defineOptions({
    name: routeComponentName.order.orderDetail,
  })

  /**
   * 是否填写了故障库
   */
  const isFillFault = computed(() => {
    if (!orderDetail.value) {
      return false
    }

    if (userStore.$state.role[0] && userStore.$state.role[0].roleType === 1) {
      return true
    }

    if (orderDetail.value.moduleId === fixedData.buy_spare_part) {
      return true
    }

    if (
      !orderDetail.value.fault ||
      !orderDetail.value.faultReason ||
      orderDetail.value.faultReason.length === 0
    ) {
      return false
    }

    return true
  })
  const goodListInstance = ref<InstanceType<typeof Commodity> | null>(null)
  const goodList = computed(() => {
    if (!goodListInstance.value) {
      return []
    }

    return goodListInstance.value.tableData
  })
  const router = useRouter()
  const endOrderFormDrawerVisible = ref(false)
  const userStore = useUserStore()
  const sidebarInstance = ref<InstanceType<typeof Sidebar> | null>(null)
  const sparePartListInstance = ref<InstanceType<typeof SparePartList> | null>(null)
  const feeListInstance = ref<InstanceType<typeof ServiceFeeTable> | null>(null)
  const totalFeeRef = ref<InstanceType<typeof TotalFee> | null>(null)
  const btnGroupInstance = ref<InstanceType<typeof BtnGroup> | null>(null)
  const finishOrderInfoRef = ref<InstanceType<typeof FinishOrderInfo> | null>(null)
  const route = useRoute()
  const billInfoInstance = ref<InstanceType<typeof BillInfo> | null>(null)
  const orderDetail = ref<OrderDetail | null>(null)
  const feeList = computed(() => {
    if (feeListInstance.value) {
      return feeListInstance.value.fees
    }
    return []
  })
  const sparePartList = computed(() => {
    if (sparePartListInstance.value) {
      return sparePartListInstance.value.getSparePartList || []
    }
    return []
  })
  const isCanCheckQuote = computed(() => {
    const feeWaitCheckList = feeList.value.filter((item) => item.status === 1)
    const sparePartWaitCheckList = sparePartList.value.filter((item) => item.status === 1)

    if (feeList.value.length > 0 && sparePartList.value.length > 0) {
      return feeWaitCheckList.length > 0 && sparePartWaitCheckList.length > 0
    }

    return feeWaitCheckList.length > 0 || sparePartWaitCheckList.length > 0
  })
  const calcOrderTotalFee = computed(() => {
    const result = {
      totalPrice: {
        fee: 0,
        material: 0,
        total: 0,
      },
      discountPrice: {
        fee: 0,
        material: 0,
        total: 0,
      },
      actualPayment: {
        fee: 0,
        material: 0,
        total: 0,
      },
    }

    feeList.value.forEach((item) => {
      const total = item.qty * item.price
      result.totalPrice.fee += total
      if (!item.workWarrantyCollectFee) {
        result.discountPrice.fee += total
        result.actualPayment.fee += 0
      } else {
        result.discountPrice.fee += total - total * (item.discountPrice / 100)
        result.actualPayment.fee += total * (item.discountPrice / 100)
      }
    })

    sparePartList.value.forEach((item) => {
      const total = (item.qty || 1) * item.price
      result.totalPrice.material += total
      if (!item.workWarrantyCollectFee) {
        result.discountPrice.material += total
        result.actualPayment.material += 0
      } else {
        result.discountPrice.material += total - total * ((item.discountPrice || 0) / 100)
        result.actualPayment.material += total * ((item.discountPrice || 0) / 100)
      }
    })

    result.totalPrice.fee = Number(result.totalPrice.fee.toFixed(0))
    result.totalPrice.material = Number(result.totalPrice.material.toFixed(0))
    result.totalPrice.total = Number(
      (result.totalPrice.fee + result.totalPrice.material).toFixed(0),
    )

    result.discountPrice.fee = Number(result.discountPrice.fee.toFixed(0))
    result.discountPrice.material = Number(result.discountPrice.material.toFixed(0))
    result.discountPrice.total = Number(
      (result.discountPrice.fee + result.discountPrice.material).toFixed(0),
    )

    result.actualPayment.fee = Number(result.actualPayment.fee.toFixed(0))
    result.actualPayment.material = Number(result.actualPayment.material.toFixed(0))
    result.actualPayment.total = Number(
      (result.actualPayment.fee + result.actualPayment.material).toFixed(0),
    )

    return result
  })
  const loading = computed(() => {
    return (
      getOrderDetailLoading.value ||
      (finishOrderInfoRef.value && finishOrderInfoRef.value.getOrderFinishInfoLoading) ||
      takeMaterialLoading.value ||
      getOrderEndStatusLoading.value ||
      engineerAcceptOrderLoading.value ||
      networkAcceptOrderLoading.value
    )
  })

  /**
   * 获取商品列表
   */
  const getOrderGoodList = () => {
    if (goodListInstance.value && orderDetail.value) {
      goodListInstance.value.goodList(orderDetail.value.id)
    }
  }

  /**
   * 确认领料点击事件
   */
  const onConfirmTakeMaterial = async () => {
    if (orderDetail.value) {
      const res = await takeMaterial(orderDetail.value.id)
      if (res.code === 20000) {
        HMessage.success('确认领料成功')
        updateOperationLog()
        getOrderDetailData()
        getMaterialList()
        return
      }
      HMessageBox.error(res.message)
    }
  }

  /**
   * 申请结单点击事件
   */
  const onApplyEndOrder = () => {
    // const res = await applyEndOrder(orderDetail.value.id)
    // if (res.code === 20000) {
    //   HMessage.success('申请成功')
    //   updateOperationLog()
    //   getOrderDetailData()
    //   getMaterialList()
    //   return
    // }
    // HMessageBox.error(res.message)
    endOrderFormDrawerVisible.value = true
  }

  /**
   * 审核报价结束后触发
   */
  const onCheckQuoteFinish = () => {
    updateOperationLog()
    getMaterialList()
    getFeeList()
    getOrderDetailData()
    if (totalFeeRef.value && route.params.id) {
      totalFeeRef.value.getOrderTotalFeeFn(route.params.id as string)
    }
  }

  /**
   * 获取开票信息
   */
  const getBillInfo = () => {
    if (billInfoInstance.value && orderDetail.value && orderDetail.value.id) {
      billInfoInstance.value.getInfo(orderDetail.value.id)
    }
  }

  /**
   * 更新日志记录
   */
  const updateOperationLog = () => {
    nextTick(() => {
      if (sidebarInstance.value) {
        sidebarInstance.value.init()
      }
    })
  }

  /**
   * 获取物料列表
   */
  const getMaterialList = () => {
    if (sparePartListInstance.value) {
      sparePartListInstance.value.getList()
    }
  }

  /**
   * 获取费用列表
   */
  const getFeeList = () => {
    nextTick(() => {
      if (feeListInstance.value) {
        feeListInstance.value.getFees()
      }
    })
  }

  /**
   * 费用列表更新事件
   */
  const onUpdateCostTable = () => {
    if (btnGroupInstance.value) {
      btnGroupInstance.value.getWaitHandleEventList()
    }

    updateOperationLog()

    if (totalFeeRef.value && route.params.id) {
      totalFeeRef.value.getOrderTotalFeeFn(route.params.id as string)
    }

    if (btnGroupInstance.value && route.params.id) {
      btnGroupInstance.value.getOrderWaitHandleList(route.params.id as string)
    }
  }

  /**
   * 物料列表更新事件
   */
  const onUpdatePartTable = () => {
    if (btnGroupInstance.value) {
      btnGroupInstance.value.getWaitHandleEventList()
    }

    getOrderDetailData()
    updateOperationLog()

    if (totalFeeRef.value && route.params.id) {
      totalFeeRef.value.getOrderTotalFeeFn(route.params.id as string)
    }
  }

  /**
   * 按钮组更新事件
   */
  const onBtnGroupUpdate = () => {
    getOrderDetailData()
    updateOperationLog()
  }

  /**
   * 结单完成
   */
  const onEndOrderFinish = () => {
    onBtnGroupUpdate()
    if (btnGroupInstance.value && route.params.id) {
      btnGroupInstance.value.getOrderWaitHandleList(route.params.id as string)
    }
  }

  // 是否显示侧边栏
  const isShowSideBar = ref(false)

  const showAddServiceFeeWidthSpare = ref(false) // 是否显示申请服务项目与工单物料
  const getOrderDetailLoading = ref(false)
  const workNo = ref('')

  const getOrderDetailData = async () => {
    showAddServiceFeeWidthSpare.value = false
    getOrderDetailLoading.value = true
    const res = await getOrderDetail(route.params.id as string)
    getOrderDetailLoading.value = false
    if (res.data.code === 20000) {
      orderDetail.value = res.data.data.row
      workNo.value = res.data.data.row.orderNo
      showAddServiceFeeWidthSpare.value = orderDetail.value.status === 3
    } else {
      HMessageBox.error(res.data.message)
    }
  }

  /**
   * 获取结单信息
   */
  const getEndOrderInfo = () => {
    if (orderDetail.value && orderDetail.value.id && finishOrderInfoRef.value) {
      finishOrderInfoRef.value.getOrderFinishInfo(orderDetail.value.id)
    }
  }

  /**
   * 复制工单点击事件
   */
  const onOrderCopyClick = () => {
    if (orderDetail.value && goodListInstance.value) {
      setCopyInfo(orderDetail.value, goodListInstance.value.tableData)
      router.push({ path: '/order/new', query: { mode: 'orderCopy' } })
    }
  }

  const handleBtnGroupEndOrderInfoUpdate = async () => {
    getOrderDetailData()
    updateOperationLog()
    if (orderDetail.value && orderDetail.value.id) {
      await getOrderEndStatus(orderDetail.value.id)
    }
    getEndOrderInfo()
  }

  const handleEndOrderDrawerOrderDataCheck = (value: {
    faultTypeVoid: boolean
    goodNoSnCode: boolean
  }) => {
    if (!goodListInstance.value) {
      return
    }
    //
    // if (value.faultTypeVoid) {
    //   HMessageBox.error('故障类型(反馈故障)不能为空')
    //   orderInfoInstance.value.showUpdateOrderInfoDrawer()
    // }
    //
    if (value.goodNoSnCode) {
      HMessageBox.error('设备的合格证不能为空')
      const goodListDiv = document.querySelector('.good-list')
      if (goodListDiv) {
        goodListDiv.scrollIntoView({ behavior: 'smooth', block: 'start' })
      }
    }
  }

  const handleNetworkAcceptOrder = async () => {
    if (orderDetail.value) {
      networkAcceptOrderParam.value = {
        id: orderDetail.value.id,
        networkId: orderDetail.value.networkId === '0' ? '' : orderDetail.value.networkId,
      }
      const res = await networkAcceptOrder()
      if (res) {
        if (res.code === 20000) {
          HMessage.success('接单完成')
          getOrderDetailData()
          return
        }
        HMessageBox.error(res.message)
        return
      }
      HMessageBox.error('接单失败，请稍后重试')
    }
  }

  const handleEngineerAcceptOrder = async () => {
    if (orderDetail.value) {
      engineerAcceptOrderParam.value = {
        id: orderDetail.value.id,
        networkId: orderDetail.value.networkId === '0' ? '' : orderDetail.value.networkId,
        engineerId: orderDetail.value.networkId === '0' ? '' : orderDetail.value.networkId || '',
      }
      const res = await engineerAcceptOrder()
      if (res) {
        if (res.code === 20000) {
          HMessage.success('接单完成')
          getOrderDetailData()
          return
        }
        HMessageBox.error(res.message)
        return
      }
      HMessageBox.error('接单失败，请稍后重试')
    }
  }

  const handleUpdateSidebarVisible = (value: boolean) => {
    isShowSideBar.value = value
    if (value) {
      updateOperationLog()
    }
  }

  watch(
    totalFeeRef,
    (value) => {
      if (value && route.params.id) {
        value.getOrderTotalFeeFn(route.params.id as string)
      }
    },
    { immediate: true, deep: true },
  )

  watch(
    btnGroupInstance,
    (value) => {
      if (value && btnGroupInstance.value) {
        btnGroupInstance.value.getOrderWaitHandleList(route.params.id as string)
      }
    },
    { immediate: true, deep: true },
  )

  onMounted(() => {
    if (route.params.id) {
      getOrderDetailData().then(() => {
        getMaterialList()
        getBillInfo()
        getEndOrderInfo()
        getFeeList()
        getOrderGoodList()
      })

      nextTick(async () => {
        if (btnGroupInstance.value) {
          btnGroupInstance.value.getOrderWaitHandleList(route.params.id as string)
        }

        await getOrderEndStatus(route.params.id as string)
      })
    }
  })
</script>

<template>
  <div v-loading="loading" class="order_detail" element-loading-text="加载中...">
    <div v-if="orderDetail" class="header">
      <status
        :order-detail="orderDetail"
        :order-total-fee="calcOrderTotalFee.actualPayment.total"
      />

      <div class="btn-group">
        <h-plain-button
          v-if="orderDetail.status === 2 && orderDetail.dispatchNetwork === 1"
          v-permission="'order_sure_network'"
          @click="handleNetworkAcceptOrder"
        >
          部门确认接单
        </h-plain-button>

        <h-plain-button
          v-if="orderDetail.status === 3 && orderDetail.dispatchEnginerrNetwork === 1"
          v-permission="'order_sure_engineer'"
          @click="handleEngineerAcceptOrder"
        >
          工程师确认接单
        </h-plain-button>
        <!-- <h-plain-button @click="onPushDownReturnFactoryClick">下推返厂单</h-plain-button> -->
        <h-plain-button @click="onOrderCopyClick">复制工单信息</h-plain-button>
        <h-plain-button
          v-if="
            orderDetail &&
            [4, 5].includes(orderDetail.status) &&
            orderDetail.workSpareStatus === 6 &&
            isFillFault
          "
          @click="onConfirmTakeMaterial"
        >
          确认领料
        </h-plain-button>
        <template v-if="orderDetail.status === 3 && orderDetail.engineerManagerEmp">
          <h-plain-button
            v-if="endStatus"
            v-permission="'updatet_satement'"
            @click="onApplyEndOrder"
          >
            修改结单信息
          </h-plain-button>
          <h-plain-button v-else @click="onApplyEndOrder"> 申请结单 </h-plain-button>
        </template>
        <btn-group
          ref="btnGroupInstance"
          :order-detail="orderDetail"
          :check-quote-btn-visible="isCanCheckQuote"
          @update="onBtnGroupUpdate"
          @update-cost-list="
            () => {
              onUpdateCostTable()
              getFeeList()
            }
          "
          @update-part-list="
            () => {
              onUpdatePartTable()
              getMaterialList()
            }
          "
          @update-list="updateOperationLog"
          @end-order-finish="onEndOrderFinish"
          @check-quote-finish="onCheckQuoteFinish"
        />
      </div>
    </div>
    <div v-if="orderDetail" class="body">
      <div class="content_container">
        <el-scrollbar always>
          <div class="content">
            <div class="user_network_info">
              <div class="user_info">
                <user-info :order-detail="orderDetail" @updata_detail="onBtnGroupUpdate" />
              </div>
              <div class="network_info">
                <network-info :order-detail="orderDetail" />
              </div>
            </div>
            <bill-info ref="billInfoInstance" />
            <div class="order_info">
              <order-info :order-detail="orderDetail" @update="getOrderDetailData" />
            </div>
            <template v-if="orderDetail && [3, 4].includes(orderDetail.status)">
              <finish-order-info ref="finishOrderInfoRef" />
            </template>
            <commodity ref="goodListInstance" :order-detail="orderDetail" />
            <service-fee-table
              ref="feeListInstance"
              :order-detail="orderDetail"
              :good-list="goodList"
              @updated="onUpdateCostTable"
            />
            <spare-part-list
              ref="sparePartListInstance"
              :order-detail="orderDetail"
              @updated="onUpdatePartTable"
            />
            <total-fee
              ref="totalFeeRef"
              :order-id="orderDetail ? orderDetail.id : ''"
              :total-price="calcOrderTotalFee"
            />
          </div>
        </el-scrollbar>

        <div
          class="expand_collapse"
          :style="{ transform: `translate(${isShowSideBar ? 100 : 0}%, 100%)` }"
        >
          <el-tooltip v-if="isShowSideBar" content="收起" placement="left">
            <span class="show_btn_r" @click="handleUpdateSidebarVisible(false)">
              <el-icon>
                <DArrowRight />
              </el-icon>
            </span>
          </el-tooltip>
          <el-tooltip v-else content="展开" placement="left">
            <span class="show_btn_l" @click="handleUpdateSidebarVisible(true)">
              <el-icon>
                <DArrowLeft />
              </el-icon>
            </span>
          </el-tooltip>
        </div>
      </div>
      <div v-if="isShowSideBar && route.params.id" class="sidebar">
        <sidebar ref="sidebarInstance" :order-detail="orderDetail" @update="getOrderDetailData" />
      </div>
    </div>

    <end-order-form-drawer
      v-if="orderDetail"
      v-model="endOrderFormDrawerVisible"
      :order-detail="orderDetail"
      :end-status="endStatus"
      :good-list="goodList"
      @update="handleBtnGroupEndOrderInfoUpdate"
      @order-data-check-before-submit="handleEndOrderDrawerOrderDataCheck"
    />
  </div>
</template>

<style lang="scss" scoped>
  :deep(.el-collapse-item__arrow) {
    display: none;
  }

  .order_detail {
    width: 100%;
    height: calc(100vh - 90px);
    overflow: auto;
    box-sizing: border-box;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;

    .header {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      background-color: #fff;
      padding: 12px;

      .btn-group {
        display: flex;
        column-gap: 5px;
      }
    }

    .body {
      width: 100%;
      height: calc(100% - 64px);
      display: flex;
      gap: 4px;

      .content_container {
        min-width: calc(100% - 12px - 360px);
        position: relative;
        height: 100%;

        .content {
          height: 100%;
          overflow-y: auto;
          display: flex;
          flex-direction: column;
          column-gap: 4px;
          row-gap: 4px;

          &::-webkit-scrollbar {
            display: none;
          }
        }

        .expand_collapse {
          position: absolute;
          z-index: 99;
          right: 0;
          top: 0;
          cursor: pointer;
          width: 18px;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;

          .show_btn_r {
            background-color: #fff;
            padding: 0 3px;
            box-shadow: 4px 0 4px 2px #e4e7ed;
            border-radius: 0 8px 8px 0;
            line-height: 32px;
            height: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .show_btn_l {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fff;
            padding: 0 3px;
            box-shadow: -4px 0 8px 2px #e4e7ed;
            border-radius: 8px 0 0 8px;
            line-height: 32px;
            height: 32px;
          }
        }

        .user_network_info {
          display: flex;
          gap: 4px;

          .user_info,
          .network_info {
            width: calc((100% - 12px) / 2);
            background-color: #fff;
            padding: 16px;
          }
        }

        .order_info {
          background-color: #fff;
          padding: 16px;
          width: calc(100% - 32px);
        }
      }

      .sidebar {
        min-width: 360px;
        height: 100%;
        background-color: #fff;
        padding: 12px;
        box-sizing: border-box;
      }
    }
  }

  :deep(.el-tag) {
    border: none;
  }

  .space {
    margin-top: 60px;
    position: relative;
  }

  .pt5 {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
  }

  .pt10 {
    padding-top: 10px;
  }

  .mt10 {
    margin-top: 10px;
  }

  .mb10 {
    margin-bottom: 10px;
  }

  .mt20 {
    margin-top: 20px;
  }

  .title {
    h4 {
      line-height: 30px;
      color: #333333;
      font-size: 15px;
    }
  }

  .title_bl {
    border-left: #007cff solid 3px;
    padding-left: 5px;
    font-size: 14px;
  }

  .ord_dis {
    display: flex;
    justify-content: center;
    align-items: center;

    .img {
      width: 14px;
      height: 14px;
      margin-left: 20px;
      cursor: pointer;
    }
  }

  :deep(.el-table) {
    .number {
      color: #007cff;
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }
    }

    .cell {
      // text-align: center;
      font-size: 12px;
    }

    //th.el-table__cell + th.el-table__cell {
    //  .cell {
    //    border-left: 1px solid #e7e3e3;
    //  }
    //}
  }

  :deep(.el-table--border .el-table__cell) {
    //border-right: none;
  }

  .waiting_x {
    padding: 2px 4px;
    font-size: 12px;
    border-radius: 2px;
    height: 14px;
    line-height: 12px;
    color: #ffffff;
    background-color: #e69103;
    cursor: pointer;
  }

  .waiting_pass {
    padding: 2px 4px;
    font-size: 12px;
    border-radius: 2px;
    height: 14px;
    line-height: 12px;
    color: #ffffff;
    background-color: #a6a6a6;
    cursor: not-allowed;
  }

  .text-color {
    color: #007cff !important;

    &:hover {
      text-decoration: underline;
      cursor: pointer;
    }
  }

  .pagination {
    display: flex;
    margin-top: 10px;
    justify-content: end;
  }

  :deep(.el-tabs--border-card > .el-tabs__header) {
    .el-tabs__item {
      color: #000;
      font-size: 12px;
    }
  }

  .basic_information {
    padding: 12px 8px 0;

    :deep(.el-form-item__label) {
      color: #000000c9;
      font-size: 12px;
      height: 23px;
      line-height: 23px;
    }

    :deep(.el-form-item--default .el-form-item__content) {
      line-height: 23px;
    }

    .ml {
      font-size: 12px;
      color: #999;
    }

    .content_msg {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-wrap: break-word;
      word-break: break-all;
    }
  }

  .right_side {
    margin-right: 12px;

    :deep(.el-tabs__item.is-active) {
      color: #007cff !important;
    }

    :deep(.el-tabs__nav-wrap::after) {
      height: 1px;
    }

    :deep(.el-tabs__nav .el-tabs__active-bar) {
      background-color: #007cff;
      padding: 0 10px;
      position: absolute;
      bottom: 0;
      left: -10px;
    }

    :deep(.el-tabs__nav .el-tabs__item:hover) {
      color: #007cff;
    }
  }

  .pro_dra {
    :deep(.el-input .el-input__wrapper) {
      box-shadow: 0 0 0 2px transparent;
      height: 40px;
      background-color: #f4f5f5;
      box-sizing: border-box;
    }

    :deep(.el-textarea__inner) {
      box-shadow: 0 0 0 2px transparent;
      background-color: #f4f5f5;
      font-size: 12px;
    }
  }

  :deep(.el-drawer__header) {
    margin-bottom: 0;
  }

  .ul_timeline {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;

    /* IE 10+ */
    ::-webkit-scrollbar {
      display: none;
      /* Chrome Safari */
    }

    .first_pane {
      max-height: 72vh;
      overflow-y: auto;
    }
  }

  .footer {
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .btn-save {
      border-color: #00c0c0;
      background-color: #00c0c0;
    }

    .btn-cancel {
      color: #383838;
      border-color: #a6a6a6;
      background-color: transparent;
    }
  }

  .el-tag.el-tag--success {
    --el-tag-text-color: #00c0c0;
    --el-tag-bg-color: #ebf6f6;
    --el-tag-border-color: #ebf6f6;
    --el-tag-hover-color: #00c0c0;
  }

  .el-tag.el-tag--info {
    --el-tag-border-color: var(--el-color-info-light-9);
  }

  .el-tag {
    --el-tag-border-color: var(--el-color-primary-light-9);
  }

  .el-tag.el-tag--warning {
    --el-tag-border-color: var(--el-color-warning-light-9);
  }
</style>
